<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
    <title>log scale</title>
    <!--[if IE]>
    <script type="text/javascript" src="../excanvas.js"></script>
    <![endif]-->
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <script type="text/javascript" src="../dygraph-dev.js"></script>

  </head>

  <body>
    <center>
	    <input id='log' type="button" value="log scale" onclick="setLogScale(true)">
	    <input id='linear' type="button" value="linear scale" onclick="setLogScale(false)">
    </center>

    <h2>X axis of dates</h2>
    <div id="div_g0" style="width:600px; height:300px;"></div>

    <h2>X axis of numbers</h2>
    <div id="div_g1" style="width:600px; height:300px;"></div>

    <script type="text/javascript">
      function data0() {
        return "Date,A\n" +
        "20101201,5\n"+
        "20101202,10\n"+
        "20101203,-1\n"+
        "20101204,250\n"+
        "20101205,1000\n"+
        "20101206,30\n"+
        "20101207,80\n"+
        "20101208,100\n"+
        "20101209,500\n"+
        "";
      };
      function data1() {
        return "X,A\n" +
        "1,0.000001\n"+
        "2,10\n"+
        "3,100\n"+
        "4,250\n"+
        "5,1000\n"+
        "6,30\n"+
        "7,0\n"+
        "8,100\n"+
        "9,500\n"+
        "101,500\n"+
        "";
      };

      var g0 = new Dygraph(document.getElementById("div_g0"),
                      data0, { logscale : true });
      var g1 = new Dygraph(document.getElementById("div_g1"),
                      data1, { logscale : true });
      function setLogScale(val) {
        g0.updateOptions({ logscale: val });
        g1.updateOptions({ logscale: val });
        document.getElementById("linear").disabled = !val;
        document.getElementById("log").disabled = val;
      }
    </script>

  </body>
</html>
